<template>
  <div class="live2d-wrap hidden-md-and-down">
    <div class="live2d-menu">
      <span class="live2d-menu--item"><i class="el-icon-refresh" @click="changeModel"></i></span>
      <span class="live2d-menu--item"><i class="el-icon-goods" @click="changeTextures"></i></span>
    </div>
    <canvas id="live2d" width="300" height="300"></canvas>
  </div>
</template>

<script lang="ts" setup>
import '@/static/js/live2d'
import axios from 'axios'
const LIVE2D_MODEL_NAME = 'ua_live2d'
const GET_URL = 'https://live2d.fghrsh.net/api/get/'
const MODEL_URL = 'http://api.fghrsh.net/live2d/switch/'
const TEXTURES_URL = 'https://api.fghrsh.net/live2d/rand_textures/'

let modelId = 4,
  texturesId = 0

// 加载model
function loadModel() {
  window.loadlive2d('live2d', `${GET_URL}?id=${modelId}-${texturesId}`)
}
// 重置model

function resetModel() {
  modelId = 1
  texturesId = 0
  loadModel()
}

async function changeTextures() {
  try {
    let result = await axios.get(`${TEXTURES_URL}?id=${modelId}`)
    texturesId = result.data?.textures.id
    loadModel()
  } catch (err) {
    resetModel()
  }
}

async function changeModel() {
  try {
    let result = await axios.get(`${MODEL_URL}?id=${modelId}`)
    let model = result.data?.model
    modelId = model.id
    loadModel()
  } catch (err) {
    resetModel()
  }
}
</script>

<style lang="stylus" scoped></style>
